<template>
  <div class="app">
    <el-card class="card_box">
      <h2>
        用户登录
        <!-- 全局图标测试 使用icon图标是需要 全局引入 -->
        <!-- <el-icon :size="size" :color="color">
                  <Avatar />
             </el-icon> -->
      </h2>
      <!-- 表单校验 -->
      <!-- 用户名 -->
      <el-form
        ref="login"
        :model="state.loginForm"
        :rules="state.loginRules"
        label-width="20px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            v-model="state.loginForm.username"
            :prefix-icon="Avatar"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <!-- 密码 -->
      <el-form
        ref="login"
        :model="state.loginForm"
        :rules="state.loginRules"
        label-width="20px"
        class="demo-ruleForm"
      >
        <el-form-item prop="password">
          <el-input
            v-model="state.loginForm.password"
            :prefix-icon="Unlock"
            autocomplete="off"
          />
        </el-form-item>
      </el-form>
      <!-- 登录按钮 -->
      <el-button type="primary" style="width: 120px" @click="setlogin"
        >登录</el-button
      >
    </el-card>
    <p>
      测试权限账号：<br />
      提供三种权限账号：<br />
      1. 超级管理员账号： super-admin<br />
      2. 管理员账号：admin <br />
      3. 测试可配置账号：test <br />
      密码统一为：123456 <br />
      导入用户账号：<br />
      可使用导入的用户名登录 <br />
      密码统一为：123456 <br />
      注意：导入用户区分中英文库！！！！
    </p>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { Avatar, Unlock } from "@element-plus/icons-vue";   // 引入element的icon图标
import {GetLogin} from '@/http/api'    //引入地址
import { useStore } from "vuex";  // 引入vuex
import {useRouter,useRoute} from "vue-router";
import md5 from 'md5'   //md5加密  安装插件  cnpm i md5 -S

 let router = useRouter();
let store = useStore();

const state = reactive({
  loginForm: {
    username: "super-admin",
    password: '123456',
  },
  loginRules: {
    username: [
     { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password:[
       {
            required: true,
            min: 6,
            max: 16,
            message: "请输入账户密码 6-16位",
            trigger: "blur",
          },
    ]
  },
});

const login = ref()   //获取页面中的ref='login的值
// 点击登录
const setlogin = () =>{
 login.value.validate((valid)=> { 
     if(valid){
      const {username,password} = state.loginForm
      GetLogin({
          username,
          password:md5(password)
      }).then((res)=>{
            console.log('登录',res);
          if(res.code == 200){
             store.dispatch('userInfos' ,'Bearer '+res.data.token)
              setTimeout(function(){
                  router.push('/home')
              },0)
          }
      })
     }else{
        return false;  
     }
 })
}
</script>
<style lang="scss">
.app {
  .card_box {
    width: 500px;
    height: 340px;
    padding: 20px;
    position: relative;
    left: 50%;
    transform: translate(-50%, 60%);
  }
}
p {
  margin-top: 250px;
}
* {
  padding: 0;
  margin: 0;
}
h2{
  font-size: 18px;
  font-weight: 600;
}
</style>